<template>
  <div>
    <h3>Deployment Processing</h3>
    <div v-loading="uiOpts.loading">
      <el-form ref="form" label-position="top" :model="yamlInfo">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              :label="$t('commons.table.status')"
              prop="spec.paused"
            >
              <el-radio-group
                v-model="yamlInfo.spec.paused"
                @change="onStatusChanged"
              >
                <el-radio :label="true">{{
                  $t("business.workload.pause")
                }}</el-radio>
                <el-radio :label="false">{{
                  $t("business.workload.resume")
                }}</el-radio>
              </el-radio-group>
              <div>
                <span v-if="yamlInfo.spec.paused" style="font-size: 12px">{{
                  $t("business.workload.pause_help")
                }}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              :label="$t('business.workload.min_ready_time')"
              prop="spec.minReadySeconds"
            >
              <span>{{ yamlInfo.spec.minReadySeconds || 0 }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('business.workload.progress_deadline')"
              prop="spec.progressDeadlineSeconds"
            >
              <span>{{ yamlInfo.spec.progressDeadlineSeconds || 0 }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useK8SApi } from "../../../api/k8s";
import { useI18n } from "vue-i18n";
import { ElMessageBox } from "element-plus";

// import { updateWorkLoad } from "@/api/workloads";
const { workloadRepo } = useK8SApi();
const { t } = useI18n();

type Prop = {
  cluster: string;
  resourceType: string;
};
const props = defineProps<Prop>();

const yamlInfo = defineModel<any>("yamlInfo");
const uiOpts = reactive({
  loading: false,
  statusList: [
    { label: t("business.workload.pause"), value: true },
    { label: t("business.workload.resume"), value: false }
  ]
});

const onStatusChanged = () => {
  if (yamlInfo.value.spec?.paused) {
    ElMessageBox.alert(
      t("business.workload.pause_help"),
      t("business.workload.suspend"),
      {
        type: "warning",
        showCancelButton: true,
        confirmButtonText: t("commons.button.confirm"),
        cancelButtonText: t("commons.button.cancel")
      }
    )
      .then(() => {
        uploadWorkloadStatus();
      })
      .catch(() => {
        yamlInfo.value.spec.paused = false;
      });
  }
};

const uploadWorkloadStatus = () => {
  uiOpts.loading = true;
  workloadRepo
    .updateWorkLoad(
      props.cluster,
      props.resourceType,
      yamlInfo.value.metadata.namespace,
      yamlInfo.value.metadata.name,
      yamlInfo.value
    )
    .then(() => {
      uiOpts.loading = false;
    })
    .catch(() => {
      uiOpts.loading = false;
    });
};
</script>

<style scoped></style>
